import React from 'react';

class ScrollTest extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ScrollTest';
        this.state = {
            divScrollTop: props.scrollOffsetTop
        }
    }


    componentDidMount() {
        console.log("divScrollTop:");
        console.log(this.state.divScrollTop);

        // 监听页面滚动
        window.addEventListener('scroll', this.handleScroll.bind(this));
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            divScrollTop: nextProps.scrollOffsetTop
        });
    }

    handleScroll () {
        let divsTop = this.state.divScrollTop;

        let bodyTop = $("body").scrollTop();

        let navUl= $(".cnav>ul");

       // 当页面滚动到两个 div 之间的时候，传送相应的 nav 的号码，在 cnav 组件里修改 nav 的class
       $.each(divsTop, ( index, el ) => {
            let navActive = navUl.find(".active");

            if( bodyTop > el && bodyTop < divsTop[index+1]) {

                let num = index;

                this.props.passNavPosition(num);
            }
        })
    }

    render() {
        return (
            <div className="scroll">
                <div className="item"> scroll One </div >
                <div>  scroll TWO  </div>
                <div> scroll THREE </div>
                <div> scroll FOUR </div>
                <div> scroll FIVE </div>
            </div>
        );
    }
}

export default ScrollTest;
